<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="../../css/utils/bootstrap.min.css" />
    <link rel="stylesheet" href="../../css/utils/common.css" />
	<title></title>
	<style>
		.list-li {
			margin-top: 10px;
		}
		.cart-title {
			padding: 10px 0;
			color: #fff;
			font-size: 16px;
			text-align: center;
			background-color: #11b5ab;
			border-top-left-radius: 10px;
			border-top-right-radius: 10px;
		}
		.cart-content {
			padding: 10px 20px;
			color: #fff;
			background-color: #185f6c;
			border-bottom-left-radius: 10px;
			border-bottom-right-radius: 10px;
		}
		.enroll-title {
			padding: 10px 0;
			padding-left: 20px;
			color: #fff;
			font-size: 16px;
			background-color: #11b5ab;
			border-top-left-radius: 10px;
			border-top-right-radius: 10px;
		}
		.sub-title {
			font-size: 14px;
		}
		.enroll-content {
			color: #fff;
			background-color: #185f6c;
			border-bottom-left-radius: 10px;
			border-bottom-right-radius: 10px;
		}
		.enroll-content .table {
			margin-bottom: 0;
		}
		.enroll-content .table>tbody>tr>td {
			border-top: 1px solid #fff;
    		border-right: 1px solid #fff;
		}
	</style>
</head>
<body>
	<div class="content">
		<div class="btn-group btn-group-justified btn-tab" role="group" aria-label="button-group">
			<div class="btn-group" role="group">
				<button type="button" panel-data="tab-panel1" class="btn btn-default active">名片</button>
			</div>
			<div class="btn-group" role="group">
				<button type="button" panel-data="tab-panel2" class="btn btn-default">报名</button>
			</div>
		</div>
		<div class="tab-content">
			<div id="tab-panel1" class="tab-pane active">
				<ul id="cartList" class="list-ul">
					<!--<li class="list-li">
						<div class="cart-title">北京未来脉络科技有限公司</div>
						<div class="cart-content space-between">
							<div>刘刚</div><div>制式教练</div><div>18685306265</div>
						</div>
					</li>-->
				</ul>
			</div>
			<div id="tab-panel2" class="tab-pane">
				<ul id="enrollList" class="list-ul">
					<!--<li class="list-li">
						<div class="enroll-title">
							免费设计限额枪钉
							<div class="sub-title">一次量房，两套效果图，三份报价对比</div>
						</div>
						<div class="enroll-content">
							<table class="table">
								<tbody><tr>
									<td>阅读人数</td><td>参与人数</td><td>转化率</td>
								</tr>
								<tr>
									<td>123</td><td>423</td><td>33.33%</td>
								</tr></tbody>
							</table>
						</div>
					</li>-->
				</ul>
			</div>
		</div>	
	</div>	
	<script type="text/javascript" src="../../js/utils/jquery-1.12.4.min.js" ></script>
	<script type="text/javascript" src="../../js/utils/bootstrap.min.js" ></script>
	<script type="text/javascript" src="../../js/utils/jquery.cookie.js" ></script>
	<script type="text/javascript" src="../../js/utils/boot.js" ></script>
	<script>
		var userID = $.cookie("userID");
		var companyID = $.cookie("companyID");
		var companyName = $.cookie("companyName");
		$(function() {
			getCardListInfo();
		})
		$(".btn-tab").on("click", "button", function(){
			$(".btn-tab button").removeClass("active");
			$(this).addClass("active");
			var panelId = $(this).attr("panel-data");
			if (panelId == "tab-panel1") {
				getCardListInfo();
			} else if (panelId == "tab-panel2") {
				getEnrollListInfo();
			}
			$(".tab-content .tab-pane").removeClass("active");
			$("#"+panelId).addClass("active");
		});
		function getCardListInfo() {
			base.postData(base.url.getCardList, {userID:userID,companyID:companyID,type:1}, callbackGetCardList);
		}
		//名片列表返回
		function callbackGetCardList(data){
			if (data.success) {
				$("#cartList").html(getCardListHtml(data.context.cardList));
			}
		}
		function getCardListHtml(list) {
			var html = '';
			for (var index in list) {
				html += '<li class="list-li">';
				html += '	<div class="cart-title">'+list[index].cardName+'</div>';
				html += '	<div class="cart-content space-between">';
				html += '		<div>'+list[index].cardUserName+'</div><div>'+list[index].post+'</div><div>'+list[index].cardUserPhone+'</div>';
				html += '	</div>';
				html += '</li>';
			}
			return html;
		}
		//获取报名插件列表
		function getEnrollListInfo() {
			base.postData(base.url.getEnrollList, {userID:userID,companyID:companyID,type:1}, callbackGetEnrollList);
		}
		function callbackGetEnrollList(data){
			if (data.success) {
				$("#enrollList").html(getEnrollListHtml(data.context.enrollList));
			}
		}
		function getEnrollListHtml(list) {
			var html = '';
			for (var index in list) {
				html += '<li class="list-li">';
				html += '	<div class="enroll-title">';
				html += '		<span>'+list[index].activityTitle+'</span>';
				html += '		<div class="sub-title">'+list[index].activityDesp+'</div>';
				html += '	</div>';
				html += '	<div class="enroll-content">';
				html += '		<table class="table">';
				html += '			<tbody><tr>';
				html += '				<td>阅读人数</td><td>参与人数</td><td>转化率</td>';
				html += '			</tr>';
				html += '			<tr>';
				html += '				<td>'+list[index].readNum+'</td><td>'+list[index].enrollNum +'</td><td>'+list[index].rate+'</td>';
				html += '			</tr></tbody>';
				html += '		</table>';
				html += '	</div>';
				html += '</li>';
			}
			return html;
		}
	</script>
</body>
</html>
